<template>
  <div class="addCase">
    <el-card shadow="never" class="addCaseTop">
      <el-row class="search">
        <el-col :span="10">
          <div class="addtitle">
            <i class="el-icon-receiving"></i>
            <span>添加用例信息</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="hover" class="addmain">
      <el-row>
        <el-col :span="24" :offset="0">
          <el-form
            ref="apiFrom"
            :model="apiFrom"
            :rules="rules"
            class="apiFrom"
            label-width="100px"
          >
            <el-form-item label="用例名称" prop="name">
              <el-input v-model="apiFrom.name"></el-input>
            </el-form-item>

            <el-form-item label="用例目录" prop="name">
              <wlTreeSelect
                width="240"
                :data="treeData"
                @change="hindleChanged"
                v-model="selected"
                placeholder="请选择用例目录"
                :defaultExpandAll="treeEx"
                :leaf="le"
              ></wlTreeSelect>
            </el-form-item>

            <el-form-item label>
              <!-- 前置方法区 -->
              <el-collapse v-model="activepre">
                <el-collapse-item title="前置区<折叠>" name="1">
                  <div>
                    自定义方法：自定义方法生成各种数据，满足用例测试场景需要；
                  </div>
                  <div>操作数据库：在当前测试环境中执行SQL，保证用例通畅。</div>
                  <el-tabs type="border-card" class="commonMeth">
                    <el-tab-pane label="自定义方法">
                      <el-card shadow="never" class="addCard">
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="addComItem"
                        ></el-button>
                        <el-button type="primary" @click="popDes"
                          >查看方法描述</el-button
                        >
                      </el-card>

                      <el-card>
                        <el-form
                          ref="commoFrom"
                          :inline="true"
                          :model="commoFrom"
                        >
                          <!-- 固定项目 -->
                          <el-form-item label="方法">
                            <el-input
                              v-model="commoFrom.result"
                              placeholder="变量名"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-select
                              v-model="commoFrom.method"
                              clearable
                              placeholder="选择方法"
                            >
                              <el-option
                                v-for="item in commonMethod"
                                :key="item.id"
                                :label="item.method_name"
                                :value="item.method_name"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="commoFrom.f_params"
                              placeholder="参数一 可为空"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="commoFrom.s_params"
                              placeholder="参数二 可为空"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="commoFrom.t_params"
                              placeholder="参数三 可为空"
                            ></el-input>
                          </el-form-item>

                          <!-- 动态增加项目 -->
                          <!-- 不止一个项目，用div包裹起来 -->
                          <div
                            v-for="(item, index) in commoFrom.dynamicItem"
                            :key="index"
                          >
                            <el-form-item label="方法">
                              <el-input v-model="item.result"></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-select
                                v-model="item.method"
                                clearable
                                placeholder="选择方法"
                              >
                                <el-option
                                  v-for="item in commonMethod"
                                  :key="item.id"
                                  :label="item.method_name"
                                  :value="item.method_name"
                                ></el-option>
                              </el-select>
                            </el-form-item>

                            <el-form-item label>
                              <el-input
                                v-model="item.f_params"
                                placeholder="参数一 可为空"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-input
                                v-model="item.s_params"
                                placeholder="参数二 可为空"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-input
                                v-model="item.t_params"
                                placeholder="参数三 可为空"
                              ></el-input>
                            </el-form-item>

                            <el-form-item>
                              <i
                                class="el-icon-delete"
                                @click="deleteComItem(item, index)"
                              ></i>
                            </el-form-item>
                          </div>
                        </el-form>
                      </el-card>
                    </el-tab-pane>

                    <!-- 隐藏数据库操作 因为数据库操作集成到自动义方法里去了 -->
                    <el-tab-pane label="操作数据库" v-if="false">
                      <el-card shadow="never" class="addCard">
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="addsqlItem"
                        ></el-button>
                      </el-card>

                      <el-card class="sqlCard">
                        <el-form ref="sqlFrom" :inline="true" :model="sqlFrom">
                          <!-- 固定项目 -->
                          <el-form-item label="执行SQL">
                            <el-input
                              v-model="sqlFrom.result"
                              placeholder="变量名"
                            ></el-input>
                          </el-form-item>

                          <el-form-item label class="inputsql">
                            <el-input
                              v-model="sqlFrom.f_params"
                              placeholder="请输入SQL"
                            ></el-input>
                          </el-form-item>

                          <el-form-item label class="inputsql">
                            <el-input
                              v-model="sqlFrom.s_params"
                              placeholder="表字段名"
                            ></el-input>
                          </el-form-item>

                          <!-- 动态增加项目 -->
                          <!-- 不止一个项目，用div包裹起来 -->
                          <div
                            v-for="(item, index) in sqlFrom.dynamicItem"
                            :key="index"
                          >
                            <el-form-item label="执行SQL">
                              <el-input
                                v-model="item.result"
                                placeholder="变量名"
                              ></el-input>
                            </el-form-item>

                            <el-form-item label class="inputsql">
                              <el-input
                                v-model="item.f_params"
                                placeholder="请输入SQL"
                              ></el-input>
                            </el-form-item>

                            <el-form-item label class="inputsql">
                              <el-input
                                v-model="item.s_params"
                                placeholder="表字段名"
                              ></el-input>
                            </el-form-item>

                            <el-form-item>
                              <i
                                class="el-icon-delete"
                                @click="deletesqlItem(item, index)"
                              ></i>
                            </el-form-item>
                          </div>
                        </el-form>
                      </el-card>
                    </el-tab-pane>
                  </el-tabs>
                </el-collapse-item>
              </el-collapse>
            </el-form-item>

            <!-- 用例接口体 -->
            <el-form-item label="引用接口">
              <el-button type="primary" @click="selectApiDlg"
                >选择接口</el-button
              >
            </el-form-item>

            <el-form-item label="接口类型">
              <el-select
                v-model="apiFrom.apimethod"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in apiType"
                  :key="item.id"
                  :label="item.method"
                  :value="item.method"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="接口路径">
              <el-input v-model="apiFrom.api"></el-input>
            </el-form-item>

            <el-form-item label="请求头">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="apiFrom.headers"
              ></el-input>
            </el-form-item>

            <el-form-item label="请求体">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="apiFrom.body"
              ></el-input>
            </el-form-item>

            <el-form-item label>
              <el-collapse v-model="activeNames">
                <el-collapse-item title="后置区<折叠>" name="1">
                  <div>结果校验:用例的检查点，检查用例执行结果；</div>
                  <div>参数化：将用例的返回数据存入变量，方便使用；</div>
                  <div>自定义方法：可以使用一些方法将返回结果格式化。</div>
                  <el-tabs type="border-card">
                    <el-tab-pane label="结果校验">
                      <el-form label-width="100px" class="check">
                        <el-form-item label="校验数据">
                          <el-radio-group v-model="apiFrom.checkrestype">
                            <el-radio :label="0">Response Header</el-radio>
                            <el-radio :label="1">Response Body</el-radio>
                            <el-radio :label="2">Status Code</el-radio>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="校验方式">
                          <el-select
                            v-model="apiFrom.checkmethod"
                            clearable
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in checkMethod"
                              :key="item.id"
                              :label="item.method_name"
                              :value="item.method_name"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="校验值">
                          <el-input v-model="apiFrom.checkdata"></el-input>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="参数化">
                      <el-card shadow="never" class="addCard">
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="parameaddComItem"
                        ></el-button>
                      </el-card>

                      <el-card class="paramComm">
                        <el-form
                          ref="parcommonFrom"
                          :inline="true"
                          :model="parcommonFrom"
                        >
                          <!-- 固定项目 -->
                          <el-form-item label="获取参数">
                            <el-input
                              v-model="parcommonFrom.result"
                              placeholder="变量名"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-select
                              v-model="parcommonFrom.method"
                              clearable
                              placeholder="获取参数方法"
                            >
                              <el-option
                                v-for="item in paramMethod"
                                :key="item.id"
                                :label="item.method_name"
                                :value="item.method_name"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="parcommonFrom.f_params"
                              placeholder="定位参数-可为空"
                            ></el-input>
                          </el-form-item>

                          <!-- 动态增加项目 -->
                          <!-- 不止一个项目，用div包裹起来 -->
                          <div
                            v-for="(item, index) in parcommonFrom.dynamicItem"
                            :key="index"
                          >
                            <el-form-item label="获取参数">
                              <el-input
                                v-model="item.result"
                                placeholder="变量名"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-select
                                v-model="item.method"
                                clearable
                                placeholder="获取参数方法"
                              >
                                <el-option
                                  v-for="item in paramMethod"
                                  :key="item.id"
                                  :label="item.method_name"
                                  :value="item.method_name"
                                ></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label>
                              <el-input
                                v-model="item.f_params"
                                placeholder="定位参数-可为空"
                              ></el-input>
                            </el-form-item>
                            <el-form-item>
                              <i
                                class="el-icon-delete"
                                @click="paramedeleteComItem(item, index)"
                              ></i>
                            </el-form-item>
                          </div>
                        </el-form>
                      </el-card>
                    </el-tab-pane>

                    <el-tab-pane label="自定义方法">
                      <el-card shadow="never" class="addCard">
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          circle
                          @click="resaddComItem"
                        ></el-button>
                        <el-button type="primary" @click="popDes"
                          >查看方法描述</el-button
                        >
                      </el-card>

                      <el-card class="resComm">
                        <el-form
                          ref="rescommoFrom"
                          :inline="true"
                          :model="rescommoFrom"
                        >
                          <!-- 固定项目 -->
                          <el-form-item label="方法">
                            <el-input
                              v-model="rescommoFrom.result"
                              placeholder="变量名"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-select
                              v-model="rescommoFrom.method"
                              clearable
                              placeholder="选择方法"
                            >
                              <el-option
                                v-for="item in commonMethod"
                                :key="item.id"
                                :label="item.method_name"
                                :value="item.method_name"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="rescommoFrom.f_params"
                              placeholder="参数一 可为空"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="rescommoFrom.s_params"
                              placeholder="参数二 可为空"
                            ></el-input>
                          </el-form-item>
                          <el-form-item label>
                            <el-input
                              v-model="rescommoFrom.t_params"
                              placeholder="参数三 可为空"
                            ></el-input>
                          </el-form-item>

                          <!-- 动态增加项目 -->
                          <!-- 不止一个项目，用div包裹起来 -->
                          <div
                            v-for="(item, index) in rescommoFrom.dynamicItem"
                            :key="index"
                          >
                            <el-form-item label="方法">
                              <el-input
                                v-model="item.result"
                                placeholder="变量名"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-select
                                v-model="item.method"
                                clearable
                                placeholder="选择方法"
                              >
                                <el-option
                                  v-for="item in commonMethod"
                                  :key="item.id"
                                  :label="item.method_name"
                                  :value="item.method_name"
                                ></el-option>
                              </el-select>
                            </el-form-item>

                            <el-form-item label>
                              <el-input
                                v-model="item.f_params"
                                placeholder="参数一 可为空"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-input
                                v-model="item.s_params"
                                placeholder="参数二 可为空"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label>
                              <el-input
                                v-model="item.t_params"
                                placeholder="参数三 可为空"
                              ></el-input>
                            </el-form-item>

                            <el-form-item>
                              <i
                                class="el-icon-delete"
                                @click="resdeleteComItem(item, index)"
                              ></i>
                            </el-form-item>
                          </div>
                        </el-form>
                      </el-card>
                    </el-tab-pane>
                  </el-tabs>
                </el-collapse-item>
              </el-collapse>
            </el-form-item>

            <el-form-item label="备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 5 }"
                v-model="apiFrom.comments"
                placeholder="用例备注：可以描述用例的场景，给出数据标识，与前后用例关联的数据如何取到或给出SQL。做好备注，可防止遗忘用例细节，方便再次维护用例，方便同事了解用例"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="onCancel">取消</el-button>
              <!-- <el-button type="primary" @click="onNew"
                >保存并继续新增用例</el-button
              >
              <el-button type="primary" @click="onCopyNew"
                >保存并复制新增用例</el-button
              > -->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <GetApiDialog ref="getApi" />

    <el-drawer
      title="自动义方法规则"
      :visible.sync="drawer"
      show-close
      :modal-append-to-body="false"
      :append-to-body="true"
      :wrapperClosable="false"
      size="20%"
      custom-class="ruledrow"
    >
      <div class="rulediv">
        <div v-for="(item, index) in rulesss" :key="index">
          <el-descriptions :title="item.title" :column="1" direction="vertical">
            <el-descriptions-item label="【变量名】">
              -- {{ item.result }}</el-descriptions-item
            >
            <el-descriptions-item label="【参数一】">
              -- {{ item.f_parames }}</el-descriptions-item
            >
            <el-descriptions-item label="【参数二】">
              -- {{ item.s_parames }}</el-descriptions-item
            >
            <el-descriptions-item label="【参数三】">
              -- {{ item.t_parames }}</el-descriptions-item
            >
            <el-descriptions-item label="【规则描述】">
              -- {{ item.descript }}</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <div><br /></div>
      </div>
    </el-drawer>
  </div>
</template>


<script>
import GetApiDialog from "./caseChildrem/GetApiDialog";
import {
  getApitype,
  getCommonmethod,
  addCase,
  getComdes,
  getApicat,
} from "@/network/networks";

export default {
  components: {
    GetApiDialog,
  },

  data() {
    return {
      //接口信息
      apiFrom: {
        name: "",
        apimethod: "",
        catid: 0,
        api: "",
        headers: "",
        body: "",
        response: "",
        checkrestype: 0,
        checkmethod: "",
        checkdata: "",
        comments: "",
      },

      //前置方法数据
      commoFrom: {
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      //后置方法数据
      rescommoFrom: {
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      commonMethod: [], //自动定方法名称
      paramMethod: [], //参数化方法
      checkMethod: [], //检查点方法
      apiType: [], //接口类型

      //参数化数据
      parcommonFrom: {
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      //SQL操作
      sqlFrom: {
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      rules: {
        name: [
          { required: true, message: "请输入用例名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
      },

      activeNames: "1", //控制后置区默认展示
      activepre: "1", //控制前置区默认展示
      drawer: false,
      rulesss: [],
      treeEx: false,
      treeData: [],
      selected: [], // 树下拉框选中数据
      le: true,
    };
  },

  mounted() {
    if (this.$route.params.iscopy == 1) {
      this.pasteCase(this.$route.params.caseData);
    }
    this.apiFrom.catid = this.$route.params.nodeid;
    // console.log(this.apiFrom);
    this.getApitype();
    this.getCommonMehtod(0);
    this.getCommonMehtod(1);
    this.getCommonMehtod(2);
    //获取树目录
    this.getCategory();
  },

  methods: {
    getApitype() {
      getApitype()
        .then((res) => {
          if (res.code == 0) {
            this.$message.error(res.msg);
            return;
          }
          this.apiType = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    getCommonMehtod(type) {
      getCommonmethod({ menthodType: type })
        .then((res) => {
          if (res.code == 0) {
            this.$message.error(res.msg);
            return;
          }
          if (type == 0) {
            this.commonMethod = res.data;
            // console.log(this.commonMethod);
          } else if (type == 1) {
            this.checkMethod = res.data;
            // console.log(this.checkMethod);
          } else {
            this.paramMethod = res.data;
            // console.log(this.paramMethod);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    onSubmit() {
      this.$refs["apiFrom"].validate((valid) => {
        if (!valid) {
          return;
        }
        let caseData = {
          apiFrom: this.apiFrom,
          commoFrom: this.commoFrom,
          sqlFrom: this.sqlFrom,
          parcommonFrom: this.parcommonFrom,
          rescommonFrom: this.rescommoFrom,
        };
        this.addCase(caseData);
      });
    },

    //新增用例
    addCase(caseData) {
      addCase(caseData)
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.$router.push("/casemanage");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    onCancel() {
      this.$router.push("/casemanage");
    },

    //保存数据并新增
    onNew() {
      this.$refs["apiFrom"].validate((valid) => {
        if (!valid) {
          return;
        }
        let caseData = {
          apiFrom: this.apiFrom,
          commoFrom: this.commoFrom,
          sqlFrom: this.sqlFrom,
          parcommonFrom: this.parcommonFrom,
          rescommonFrom: this.rescommoFrom,
        };
        this.addCase(caseData);
        this.$router.push({
          path: "/caseadd",
          name: "CD",
          params: {
            nodeid: this.apiFrom.catid,
            iscopy: 0,
          },
        });
      });
    },

    //保存复制数据并新增
    onCopyNew() {
      this.$refs["apiFrom"].validate((valid) => {
        if (!valid) {
          return;
        }
        let caseData = {
          apiFrom: this.apiFrom,
          commoFrom: this.commoFrom,
          sqlFrom: this.sqlFrom,
          parcommonFrom: this.parcommonFrom,
          rescommonFrom: this.rescommoFrom,
        };
        this.addCase(caseData);
        this.$router.push({
          path: "/caseadd",
          name: "CD",
          params: {
            nodeid: this.apiFrom.catid,
            iscopy: 0,
            caseData: caseData,
          },
        });
      });
    },

    // //新增用例不跳转用例
    // addCaseAndNew(caseData) {
    //   addCase(caseData)
    //     .then((res) => {
    //       if (res.code == 1) {
    //         this.$message.success(res.msg);
    //       } else {
    //         this.$message.error(res.msg);
    //       }
    //     })
    //     .catch((err) => {
    //       this.$message.error(err);
    //     });
    // },

    pasteCase(caseData) {
      this.apiFrom = caseData.apiFrom;
      this.commoFrom = caseData.commoFrom;
      this.sqlFrom = caseData.sqlFrom;
      this.parcommonFrom = caseData.parcommonFrom;
      this.rescommoFrom = caseData.rescommonFrom;
    },

    //前置自定义（公共）方法组件增删操作
    addComItem() {
      this.commoFrom.dynamicItem.push({
        result: "",
        method: "",
        f_params: "",
        s_params: "",
      });
    },

    deleteComItem(item, index) {
      this.commoFrom.dynamicItem.splice(index, 1);
    },

    //后置自动定义（公共）方法组件增删除操作
    resaddComItem() {
      this.rescommoFrom.dynamicItem.push({
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    resdeleteComItem(item, index) {
      this.rescommoFrom.dynamicItem.splice(index, 1);
    },

    parameaddComItem() {
      this.parcommonFrom.dynamicItem.push({
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    paramedeleteComItem(item, index) {
      this.parcommonFrom.dynamicItem.splice(index, 1);
    },

    //数据操作组件增删操作
    addsqlItem() {
      this.sqlFrom.dynamicItem.push({
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    deletesqlItem(item, index) {
      this.sqlFrom.dynamicItem.splice(index, 1);
    },

    selectApiDlg() {
      this.$refs.getApi.showDialog = true;
    },

    setApidata(val) {
      this.apiFrom.name = val.name;
      this.apiFrom.apimethod = val.apimethod;
      this.apiFrom.api = val.api;
      this.apiFrom.headers = val.headers;
      this.apiFrom.body = val.body;
      this.$message.success("接口信息获取成功");
    },

    popDes() {
      getComdes()
        .then((res) => {
          if (res.code == 1) {
            this.rulesss = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
      this.drawer = true;
    },

    // 选择目录树
    hindleChanged(val) {
      this.apiFrom.catid = val[0].id
    },

    // 获取接口分类
    getCategory() {
      getApicat({
        cat_type: 1,
      }).then((res) => {
        this.treeData = res.data;

        //初始化显示当前目录
        if (this.apiFrom.catid != 0) {
          var lst_data = res.data[0];
          for (var i = 0; i < lst_data.children.length; i++) {
            var lst_arr = lst_data.children[i];
            for (var j = 0; j < lst_arr.children.length; j++) {
              var lst_carr = lst_arr.children[j];
              if (lst_carr.id == this.apiFrom.catid) {
                this.selected = lst_carr;
                return;
              }
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.addtitle {
  font-size: 28px;
  color: #409eff;

  span {
    padding-left: 10px;
  }
}

.addmain {
  margin-top: 10px;
  padding: 30px 0;

  .commonMeth {
    .addCard {
      margin-bottom: 20px;
    }

    .el-form {
      .el-form-item {
        margin-bottom: 10px;
      }
      .inputsql {
        .el-input {
          width: 300px;
        }
      }
    }
  }

  .resComm {
    margin-top: 20px;
    .el-form {
      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }

  .paramComm {
    margin-top: 20px;
    .el-form {
      .el-form-item {
        margin-bottom: 10px;
      }
    }
  }

  .check {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>